<template>
    <span
        :title="title"
        :class="['table-action-item', isDisable, className, ...classNameList]"
        @click="handleClick">
        <span :class="['iconfont', icon]"></span>
    </span>
</template>

<script>
/**
 * @param title             标签提示
 * @param icon              icon名称
 * @param className         类名（支持单个类）
 * @param classNameList     类名（支持多个类）
 * @param disabled          是否禁用
 */
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        className: {
            type: String,
            default: ''
        },
        classNameList: {
            type: Array,
            default: () => []
        },

        disabled: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        // 触发操作
        handleClick() {
            if(!this.disabled) {
                this.$emit('takeAction')
            }
        }
    },
    computed: {
        isDisable() {
            return this.disabled ? 'disabled-btn' : ''
        }
    }
}
</script>

<style lang="less" scoped>
    .table-action-item {
        cursor: pointer;
        
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        color: #000;
    }
    .table-action-item:hover {
        color: #409EFF;
    }
    /* 禁用 */
    .disabled-btn {
        cursor: not-allowed !important;
    }
</style>